<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue';
// 组合式函数
import { useResize } from '@/use/useResize.js'
// echart配置
import { option1, option2, option3, option4, option5 } from '@/echarts/config.js'
// 导入自定组件
import Tag from '@/components/common/Tag.vue'

let echart1_1 = null
// let echart1_2 = null
let echart1_3 = null
let echart2_1 = null
let echart2_2 = null
let echart3_1 = null
// let echart3_2 = null
let echart3_3 = null

// 重绘echart
const echart_resize = () => {
    echart1_1.resize()
    // echart1_2.resize()
    echart1_3.resize()
    echart2_1.resize()
    echart2_2.resize()
    echart3_1.resize()
    // echart3_2.resize()
    echart3_3.resize()
}

onMounted(() => {
    let echart_id_prefix = 'home-index-echart'
    echart1_1 = echarts.init(document.getElementById((echart_id_prefix + '1-1')))
    // echart1_2 = echarts.init(document.getElementById((echart_id_prefix + '1-2')))
    echart1_3 = echarts.init(document.getElementById((echart_id_prefix + '1-3')))
    echart2_1 = echarts.init(document.getElementById((echart_id_prefix + '2-1')))
    echart2_2 = echarts.init(document.getElementById((echart_id_prefix + '2-2')))
    echart3_1 = echarts.init(document.getElementById((echart_id_prefix + '3-1')))
    // echart3_2 = echarts.init(document.getElementById((echart_id_prefix + '3-2')))
    echart3_3 = echarts.init(document.getElementById((echart_id_prefix + '3-3')))
    // 绘制图表
    echart1_1?.setOption(option1)
    // echart1_2?.setOption(option4)
    echart1_3?.setOption(option1)
    echart2_1?.setOption(option2)
    echart2_2?.setOption(option5)
    echart3_1?.setOption(option3)
    // echart3_2?.setOption(option6)
    echart3_3?.setOption(option4)

    setTimeout(() => {
        echart_resize()
    }, 100)
})

useResize(() => {
    echart_resize()
})
</script>

<template>
    <div class="w-100 h-100 container">
        <Row>
            <Col span="6">
            <div class="echart-container">
                <div id="home-index-echart1-1"></div>
            </div>
            <div class="echart-container">
                <!-- <div id="home-index-echart1-2"></div> -->
                <Card>
                    <div style="height: 32px;line-height: 32px;text-align: center;font-weight: bold;">
                        使用到的其他技术
                    </div>
                    <div style="display: flex;justify-content: space-between;flex-wrap: wrap;">
                        <Tag type="primary" raius="5px" style="margin-bottom: 4px;">express</Tag>
                        <Tag type="info" raius="5px" style="margin-bottom: 4px;">sqlite</Tag>
                        <Tag type="success" raius="5px" style="margin-bottom: 4px;">mockjs</Tag>
                        <Tag type="warning" raius="5px" style="margin-bottom: 4px;">mojs</Tag>
                    </div>
                </Card>
            </div>
            <div class="echart-container">
                <div id="home-index-echart1-3"></div>
            </div>
            </Col>
            <Col span="12">
            <div class="echart-container">
                <div id="home-index-echart2-1"></div>
            </div>
            <div class="echart-container">
                <div id="home-index-echart2-2"></div>
            </div>
            </Col>
            <Col span="6">
            <div class="echart-container">
                <div id="home-index-echart3-1"></div>
            </div>
            <div class="echart-container" style="display: flex;justify-content: center;align-items: center;">
                <!-- <div id="home-index-echart3-2"></div> -->
                <Circle :size="180" :trail-width="4" :stroke-width="5" :percent="75" stroke-linecap="square"
                    stroke-color="#43a3fb">
                    <div>
                        <span>
                            开发进度
                            <i>75%</i>
                        </span>
                    </div>
                </Circle>
            </div>
            <div class="echart-container">
                <div id="home-index-echart3-3"></div>
            </div>
            </Col>
        </Row>
    </div>
</template>

<style lang="less" scoped>
.container {
    .ivu-row {
        width: 100%;
        height: 100%;

        .ivu-col {
            display: flex;
            flex-direction: column;
            background: rgb(241, 241, 241);

            >div {
                margin: 1px;
                background: white;
                flex: 1;

                >div {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>